import { Card } from 'antd'
import ReactECharts from 'echarts-for-react'
import { useState } from 'react'
function PowerView() {
  const [option] = useState({
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['煤', '气', '油', '电', '热']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['0:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
    },
    yAxis: {
      name: '当日能源情况',
      nameTextStyle: {
        color: '#000',
        fontWeight: 'bold'
      },
      type: 'value'
    },
    series: [
      {
        name: '煤',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '气',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '油',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: '电',
        type: 'line',
        stack: 'Total',
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: '热',
        type: 'line',
        stack: 'Total',
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  })
  return (
    <>
      <Card title="能源消耗情况" variant="borderless">
        <ReactECharts option={option} style={{ height: '200px' }} />
      </Card>
    </>
  )
}

export default PowerView
